<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>首页</title>
    <script src="../js/jquery-2.2.1.min.js"></script>
    <style>
        #main{
            width: 100vw;
            height: 99vh;
            border: none;
            margin: 0;
            padding: 0;
            animation:mymove 1s;
        }
        body{
            padding: 0;
            margin: 0;
            position: absolute;
        }
        @keyframes mymove
        {
            from{opacity: 0}
            to{opacity: 1}
        }

        @-moz-keyframes mymove /* Firefox */
        {
            from{opacity: 0}
            to{opacity: 1}
        }

        @-webkit-keyframes mymove /* Safari 和 Chrome */
        {
            from{opacity: 0}
            to{opacity: 1}
        }

        @-o-keyframes mymove /* Opera */
        {
            from{opacity: 0}
            to{opacity: 1}
        }

        .active{
            animation:mymove .5s;
            -moz-animation:mymove .5s; /* Firefox */
            -webkit-animation:mymove .5s; /* Safari and Chrome */
            -o-animation:mymove .5s; /* Opera */
        }
    </style>
</head>
<body>
    <iframe id="main" name="main" src="index.html"></iframe>
</body>
<script>
    var tt = document.querySelector('body');
    tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件
        $('body').removeClass('active');
        console.log(2);
    }, false);
</script>
</html>